import "../../../node_modules/leaflet/dist/leaflet.css";
import React, { useEffect, useRef, useState } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import 'leaflet.animatedmarker/src/AnimatedMarker'
import "leaflet.markercluster";
import 'leaflet-moving-marker'
import 'leaflet-trackplayer'
import "leaflet.markercluster/dist/MarkerCluster.css";
import "leaflet.markercluster/dist/MarkerCluster.Default.css";
import 'leaflet-polylinedecorator';
import leafGreen from "../../assets/img/leaf-green.png"
// ck.png
import ck from "../../assets/assets/ck.png"
import start from "../../assets/assets/start.png"
import end from "../../assets/assets/end.png"
import shipIconActive from "../../assets/assets/supply/shipIconActive.png"
import './index.scss'
const key = "03cd4b8189df52cc8fba3d9fd345f747";

// import addressPoints from './data'

export default function Index() {
  const mapRef = useRef(null);
 

  useEffect(() => {
    setTimeout(() => {
      intiMap();
    }, 5000);
  }, []);

  const addLayer = (map) => {
    let mapTypes = ["vec_w", "cva_w"]; // 矢量&标记
    let layers = []; //天地图图层
    mapTypes.forEach((item) => {
      let layerUrl = `http://t0.tianditu.gov.cn/DataServer?T=${item}&x={x}&y={y}&l={z}&tk=${key}`;
      let layer = L.tileLayer(layerUrl, {});
      layers.push(layer);
    });
    let layerGroup = L.layerGroup(layers).addTo(map);
  };

  const intiMap = () => {
    // 初始化地图
    const map = L.map("mapDiv", {
      crs: L.CRS.EPSG3857,
      center: [39.916578, 116.403653], // 设置中心点（例如北京）
      zoom: 18, // 设置缩放级别
      minZoom: 2,
      maxZoom: 12, // 最大缩放级别
      attributionControl: true, // 隐藏属性说明控件
      draggable: true, // 允许拖动地图
      keyboard: true, // 允许键盘操作地图
      inertia: true, // 启用��性��动
      scrollWheelZoom: true, // 启用��标滚轮缩放
      zoomControl: true, // 显示缩放控件
      doubleClickZoom: true, // 启用双击缩放
      tap: true, // 启用点击事件
      touchZoom: true, // 启用触摸缩放
    });


    // L.marker([116.411794, 39.9068]).addTo(map) //没有图标的标记
    // L.marker([51.5, -0.09], { icon: '../../assets/img/leaf-green.png' }).addTo(map);
    // 创建标记，并添加到地图上
    // L.marker([39.916578, 116.403653], {
    //   icon: L.icon({
    //     iconUrl: leafGreen, //请求图标图片的URL
    //     iconSize: new L.Point(30, 30), //图标可视区域的大小。
    //     iconAnchor: new L.Point(30, 30) //图标的定位锚点

    //     // iconUrl: marker, tooltipAnchor: [0, -36], iconAnchor: [24, 48]
    //     // iconUrl: '../../assets/img/leaf-green.png',
    //     // iconUrl:'../../assets/img/leaf-green.png',
    //     // iconSize: [38, 100],
    //     // iconAnchor: [22, 94],
    //     // popupAnchor: [-3, -76],
    //     // shadowUrl: 'path/to/the/shadow.png',
    //     // shadowSize: [68, 95],
    //     // shadowAnchor: [22, 94]
    //   })
    // }).addTo(map);
// 走动的图标
    const iconPng = L.icon({
      iconSize: [17, 14],//shipIconActive.png
      iconUrl: new URL(shipIconActive, import.meta.url).href,
      iconAnchor: [0.5, 1]
    })
    // 起点
    L.marker([34.153748, 108.901978], {
      icon: L.icon({
        iconUrl: new URL(start, import.meta.url).href,
        iconSize: [23, 30]
      })
    }).addTo(map)
    // 终点
    L.marker([43.6510, -79.3820], {
      icon: L.icon({
        iconUrl: new URL(end, import.meta.url).href,
        iconSize: [23, 30]
      })
    }).addTo(map)


    const arr = [
      [34.153748, 108.901978],
      [22.7843651, 113.49106],
      [39.550781, 116.367188],
      [37.7749, -122.4194], // 例：San Francisco
      [40.7128, -74.0060], // 例：New York
      [43.6510, -79.3820] // 例：Toronto
    ]
    // 轨迹路线装饰
    const polyline = L.polyline(arr, {
      weight: 8,
    
      opacity: 0.5,
      smoothFactor: 3, // 平滑度
    }).addTo(map);
    //实时轨迹线
    const realRouteLine = L.polyline([],{
      weight: 8,
      color: '#ff9900',
    })
    // 使用L.polylineDecorator 轨迹方向箭头
    L.polylineDecorator(polyline, {
      patterns: [
        {
          offset: 10,
          repeat: 50,
          // symbol: L.symbol({
          //   pixelSize: 10,
          //   polygon: true,
          //   pathOptions: {
          //     fillColor: 'red',
          //   }
          // })
          symbol: L.Symbol.arrowHead({
            pixelSize: 5,//箭头大小
            headAngle:75,//箭头重复间距
            polygon: false,
            pathOptions: {
              fillColor: '#fff',
              weight: 1,
              stroke: true,
            }

          })
        }
      ]
    }).addTo(map);

    // setInterval(() => {
      var marker = L.animatedMarker(arr, {
        autoStart: true,
        distance: 1000, // 运动轨迹的总距离，单位为像素
        interval: 10000, // 每帧之间的时间间隔，单位为毫秒
        icon: iconPng,
        onEnd: function () {
          //移动结束后移除
          // map.removeLayer();
        }
      }).addTo(map);
    // }, 2000)

 










// 聚合物没有出现有bug
   














   

    




    addLayer(map);
  };
  // 地图实现轨迹回放
  // https://blog.csdn.net/qing12313359/article/details/141901445
  return (
    <div
      id="mapDiv"
      ref={mapRef}
      style={{ height: "83.6vh", width: "85.6%", position: "absolute" }}
    />
  );
}